<script>
  init({
    title: 'Thead Classes',
    desc: 'Use `theadClasses` option to set the table header styles.',
    links: ['bootstrap-table.min.css'],
    scripts: ['bootstrap-table.min.js']
  })
</script>

<style>
  .radio {
    float: left;
    margin-right: 15px;
  }
</style>

<div class="toolbar">
  <div class="radio">
    <label>
      <input type="radio" checked name="theadClasses">
      <code>undefined</code>
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="theadClasses">
      <code>thead-light</code>
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="theadClasses">
      <code>thead-dark</code>
    </label>
  </div>
</div>

<table
  id="table"
  data-url="json/data1.json">
</table>

<script>
  var $table = $('#table')

  function mounted() {
    $table.bootstrapTable({
      columns: [{
        title: 'ID',
        field: 'id'
      }, {
        title: 'Item Name',
        field: 'name'
      }, {
        title: 'Item Price',
        field: 'price'
      }]
    })

    $('.toolbar input').change(function () {
      var classes = $('.toolbar input:checked').next().text()

      $table.bootstrapTable('refreshOptions', {
        theadClasses: classes
      })
    })
  }
</script>
